<template>
	<view class="container">
		<custom-nav-bar title="工具箱" :isBack="false"></custom-nav-bar>
		<view class="card-list f fac fpj">
			<view class="card f fac fv fpc" @click="goPage(1)">
				<image src="../../common/images/icon1.png" mode="aspectFill"></image>
				<view class="name">车贷计算</view>
				<view class="desc">车贷计算工具</view>
			</view>
			<view class="card f fac fv fpc" @click="goPage(2)">
				<image src="../../common/images/icon2.png" mode="aspectFill"></image>
				<view class="name">房贷计算</view>
				<view class="desc">房贷计算工具</view>
			</view>
			<view class="card f fac fv fpc" @click="goPage(3)">
				<image src="../../common/images/icon3.png" mode="aspectFill"></image>
				<view class="name">进制转换</view>
				<view class="desc">各进制之间的相互转换</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from "../../components/custom-nav-bar.vue";
	
	// 页面跳转
	const goPage = (val) => {
		switch (val){
			case 1:
				uni.navigateTo({
					url: '/pages/carIoan/carIoan'
				})
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/roomIoan/roomIoan'
				})
				break;
			case 3:
				uni.navigateTo({
					url: '/pages/binary/binary'
				})
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		padding: 24rpx;
		background-color: #f5f5f5;
		.card-list {
			flex-wrap: wrap;
			width: 100%;
			.card {
				width: 48%;
				background-color: #fff;
				border-radius: 24rpx;
				margin-top: 24rpx;
				padding: 24rpx;
				image {
					width: 96rpx;
					height: 96rpx;
				}
				.name {
					font-size: 28rpx;
					color: #333;
					margin-top: 12rpx;
				}
				.desc {
					font-size: 24rpx;
					color: #666;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>
